<script lang="ts">
  import { Popover } from "@ark-ui/svelte/popover";
  import { Portal } from "@ark-ui/svelte/portal";
  import { User, Settings, LogOut, Mail, Phone, MapPin } from "lucide-svelte";

  const user = {
    name: "Sarah Chen",
    email: "sarah.chen@example.com",
    role: "Product Designer",
    location: "San Francisco, CA",
    phone: "+1 (555) 123-4567",
    status: "online",
    avatar: "https://i.pravatar.cc/40?img=10",
  };
</script>

<Popover.Root modal>
  <Popover.Trigger
    class="relative inline-flex items-center justify-center rounded-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 p-1 text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
  >
    <img
      src={user.avatar}
      alt={user.name}
      class="h-8 w-8 rounded-full object-cover"
    />
    <div
      class="absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full border-2 border-white dark:border-gray-800 {user.status ===
      'online'
        ? 'bg-green-400'
        : user.status === 'away'
          ? 'bg-yellow-400'
          : 'bg-gray-400'}"
    />
  </Popover.Trigger>
  <Portal>
    <Popover.Positioner>
      <Popover.Content
        class="z-50 w-72 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 shadow-lg data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out"
      >
        <Popover.Arrow
          class="[--arrow-size:12px] [--arrow-background:var(--color-white)] dark:[--arrow-background:var(--color-gray-800)]"
        >
          <Popover.ArrowTip
            class="border-t border-l border-gray-200 dark:border-gray-700"
          />
        </Popover.Arrow>
        <!-- Header -->
        <div class="border-b border-gray-200 dark:border-gray-700 p-3">
          <div class="flex items-center gap-3">
            <div class="relative">
              <img
                src={user.avatar}
                alt={user.name}
                class="h-10 w-10 rounded-full object-cover"
              />
              <div
                class="absolute -bottom-1 -right-1 h-3 w-3 rounded-full border-2 border-white dark:border-gray-800 {user.status ===
                'online'
                  ? 'bg-green-400'
                  : user.status === 'away'
                    ? 'bg-yellow-400'
                    : 'bg-gray-400'}"
              />
            </div>
            <div class="flex-1">
              <h3 class="font-medium text-gray-900 dark:text-gray-100">
                {user.name}
              </h3>
              <p class="text-sm text-gray-500 dark:text-gray-400">
                {user.role}
              </p>
              <p class="text-xs text-green-600 dark:text-green-400 capitalize">
                {user.status}
              </p>
            </div>
          </div>
        </div>

        <!-- Contact Info -->
        <div class="border-b border-gray-200 dark:border-gray-700 p-3">
          <div class="space-y-2">
            <div
              class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400"
            >
              <Mail size={16} />
              <span>{user.email}</span>
            </div>
            <div
              class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400"
            >
              <Phone size={16} />
              <span>{user.phone}</span>
            </div>
            <div
              class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400"
            >
              <MapPin size={16} />
              <span>{user.location}</span>
            </div>
          </div>
        </div>

        <!-- Actions -->
        <div class="p-2">
          <div class="space-y-1">
            <button
              class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <User size={16} />
              View Profile
            </button>
            <button
              class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
              <Settings size={16} />
              Account Settings
            </button>
            <hr class="my-1 border-gray-200 dark:border-gray-700" />
            <button
              class="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 focus:outline-none focus:ring-2 focus:ring-red-500"
            >
              <LogOut size={16} />
              Sign Out
            </button>
          </div>
        </div>
      </Popover.Content>
    </Popover.Positioner>
  </Portal>
</Popover.Root>
